<template>
  <div class="songs clearfix">
    <div class="songs-left">
      <h2 id="title">{{ singerList.name }}</h2>
      <span id="ename"></span>
      <div class="imglogo">
        <img :src="singerList.cover" id="singerImg" />
      </div>
      <el-tabs type="card" @tab-click="handleClick">
        <el-tab-pane label="热门作品">
          <div v-for="item in hotLists" :key="item" class="text item">
        {{item}}
      </div>
          </el-tab-pane>
        <el-tab-pane label="所有专辑">Config</el-tab-pane>
        <el-tab-pane label="相关MV">Role</el-tab-pane>
        <el-tab-pane label="艺人介绍">{{ singerList.briefDesc }}</el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// import { getHotSong } from "@/api/singer.js";
export default {
  data() {
    return {
      name: "",
      id: "",
      singerList: {},
      hotList:[],
      hotLists:[],
      albumList:{},
      mvList:[]
    };
  },
  created() {
    this.gethot()
    this.getdesc()
    this.getalbum()
    this.getmv()
  },
  methods: {
    async gethot() {
      let { query } = this.$route;
      this.id = query.id;
      let res = await fetch(`https://autumnfish.cn/artist/top/song?id=${this.id}`).then(res=>res.json());
      this.hotList = res.songs;
      this.hotList.forEach((ele)=>{
        this.hotLists.push(ele.name)
      })
      // console.log(this.hotLists);
    },
    async getalbum(){
      let { query } = this.$route;
      this.id = query.id;
      let res=await fetch(`https://autumnfish.cn/artist/album?id=${this.id}`).then(res=>res.json())
      this.albumList=res
      console.log(this.albumList);
    },
    async getmv(){
      let { query } = this.$route;
      this.id = query.id;
      let res=await fetch(``).then(res=>res.json())
      this.mvList=res
      console.log(this.mvList);
    },
    async getdesc() {
      let { query } = this.$route;
      this.id = query.id;
      // console.log("route----",this.$route);
      // let res = await getSingerInfo(this.id);
      let res = await fetch(
        `https://autumnfish.cn/artist/detail?id=${this.id}`
      ).then((res) => res.json());
      this.singerList = res.data.artist;
      // console.log(this.singerList);
    },
     handleClick(tab, event) {
      console.log(tab, event)
    },
  },
};
</script>

<style lang="less" scoped>
</style>